// 存储所有MQTT连接配置
const connections = [];

// DOM加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    console.log('DOM加载完成，初始化应用');
    
    // 新建连接按钮点击事件
    document.getElementById('new-connection').addEventListener('click', () => {
        console.log('点击新建连接按钮');
        // 跳转到配置页面
        window.location.href = 'config.html';
    });
    
    // 加载已保存的连接
    loadConnections();
});

// 加载已保存的连接
function loadConnections() {
    console.log('开始加载已保存的连接');
    
    // 从本地存储获取连接
    const savedConnections = JSON.parse(localStorage.getItem('mqttConnections')) || [];
    connections.push(...savedConnections);
    
    // 渲染连接列表
    renderConnectionList();
}

// 渲染连接列表
function renderConnectionList() {
    console.log('渲染连接列表');
    const listContainer = document.getElementById('connection-list');
    
    // 清空现有内容
    listContainer.innerHTML = '<h2>已配置连接</h2>';
    
    // 为每个连接创建DOM元素
    connections.forEach(conn => {
        const connElement = document.createElement('div');
        connElement.className = 'connection-item';
        connElement.innerHTML = `
            <p><strong>URL:</strong> ${conn.url}</p>
            <p><strong>订阅主题:</strong> ${conn.subscribeTopic || '未设置'}</p>
            <p><strong>发布主题:</strong> ${conn.publishTopic || '未设置'}</p>
            <button class="connect-btn" data-id="${conn.id}">连接</button>
        `;
        
        listContainer.appendChild(connElement);
    });
}